<template>
  <div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="selection" width="50px" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="dialogEdit(scope.row)"
            >查看</el-button>
            <el-button
              type="text"
              color="#0DB493"
              @click="dialogEdit(scope.row)"
            >评价</el-button>
            <el-button
              type="text"
              color="#0DB493"
              @click="dialogEdit(scope.row)"
            >退订</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      columns: [
        { prop: '资源名称', label: '资源名称', width: '', minWidth: '' },
        { prop: '数据表名称', label: '数据表名称', width: '', minWidth: '' },
        { prop: '提供单位', label: '提供单位', width: '', minWidth: '' },
        { prop: '版本', label: '版本', width: '', minWidth: '' },
        { prop: '接收库', label: '接收库', width: '', minWidth: '' },
        { prop: '申请时间', label: '申请时间', width: '', minWidth: '' },
        { prop: '截止时间', label: '截止时间', width: '', minWidth: '' },
        { prop: '最近更新时间', label: '最近更新时间', width: '', minWidth: '' },
        { prop: '状态', label: '状态', width: '', minWidth: '' }
      ],
      tableData: [
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}
</style>
